<div style="height: 10px; clear: both;"></div>
<div class="row">
	<div class="col s12">
		<div class="card hoverable">
			<div class="card-action grey lighten-5">
				<h2 class="light-blue-text text-darken-4"><i class="fas fa-check-square"></i>  Validate Address</h2>
			</div>
			<div class="card-content">
				<div class="row">
					<div class="col s12 l12">
						<form id="validate_address_form">
							<div class="input-field col s12">
								<input id="public_address" type="text" class="validate">
								<label for="public_address">Address</label>
							</div>
							<div class="input-field col s12">
								<a id="validate_address" class="waves-effect waves-light btn light-blue darken-4"><i class="fas fa-check"></i> Validate</a></p> 
							</div>
						</form>
					</div>
				</div>
			</div>
			<div id="validation_result" class="card-action">
				<div class="row">
					<div class="col s12 l12">
						<p id="verified"><i class="fas fa-2x"></i> <span></span></p>
						<div id="keys_container">
							<p>View Public Key: <span id="viewPublicKey"></span></p>
							<p>Spend Public Key: <span id="spendPublicKey"></span></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	var xhrValidateAddress;
	var publicAddress = $("#public_address");
	var viewPublicKey = $("#viewPublicKey");
	var spendPublicKey = $("#spendPublicKey");
	var result = $('#verified');
	var result_icon = $("#verified").find("i");
	var result_text = $("#verified").find("span");
	var result_container = $("#validation_result");
	var keys_container = $("#keys_container");
	result_container.hide();

	currentPage = {
		destroy: function () {
			if (xhrValidateAddress) xhrValidateAddress.abort();
		},
		init: function () {
			$('.tooltipped').tooltip();
		},
		update: function () {}
	};

	$("#validate_address").click(function () {
		result_container.hide();
		result_text.empty();
		viewPublicKey.empty();
		spendPublicKey.empty();

		if (!publicAddress.val()) {
			M.toast({html: 'Fill the address field!', classes: 'red'}, 5000);
			return;
		}

		validateAddress();
	});

	function validateAddress() {
		if (xhrValidateAddress) xhrValidateAddress.abort();
		xhrValidateAddress = $.ajax({
			url: api + '/json_rpc',
			method: "POST",
			data: JSON.stringify({
				jsonrpc: "2.0",
				id: "test",
				method: "validateaddress",
				params: {
					address: publicAddress.val(),
				}
			}),
			dataType: 'json',
			cache: 'false',
			success: function (data) {
				if (data.error) {
					M.toast({html: data.error.message, classes: 'red'}, 5000);
				} else {
					var res = data.result;
					result_container.removeClass("light-green lighten-5");
					result_container.removeClass("red lighten-4");
					result.removeClass("teal-text text-darken-4");
					result.removeClass("red-text text-darken-4");
					result_icon.removeClass("fa-check");
					result_icon.removeClass("fa-times");
					var isvalid = JSON.parse(res.is_valid);
					if (isvalid) {
						result_text.text("Address is valid");
						result_container.addClass("light-green lighten-5");
						result.addClass("teal-text text-darken-2");
						result_icon.addClass("fa-check");
						keys_container.show();
						viewPublicKey.text(res.view_public_key);
						spendPublicKey.text(res.spend_public_key);
					} else {
						result_text.text("Address is invalid!");
						result_container.addClass("red lighten-4");
						result.addClass("red-text text-darken-4");
						result_icon.addClass("fa-times");
						keys_container.hide();
					}
					result_container.show();
				}
			}
		});
	}
</script>